import './index.less'
import { Select, Divider, Pagination, Spin } from 'ant-design-vue'
import debounce from 'lodash/debounce'
const { Option } = Select
export default {
  name: 'StandardSelect',
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => {
        return ctx.props.vnodes
      }
    }
  },
  props: {
    // 下拉框值，用来关联v-decorator
    value: {
      type: [String, Number],
      default: undefined
    },
    // 下拉数据 url不存在时，默认使用从父级传递过来的数据展示下拉
    options: {
      type: Array,
      default () {
        return []
      }
    },
    showSearch: {
      type: Boolean
    },
    // 分页条数 默认10条数据
    pageSize: {
      type: Number,
      default: 10
    },
    // pageTotal 传入值，即开启分页查询功能
    pageTotal: {
      type: Number,
      default: 0
    },
    // 下拉选项的值字段
    labelValue: {
      type: String,
      default: 'value'
    },
    // 下拉选项的文本字段
    labelText: {
      type: String,
      default: 'label'
    },
    // 提示语句
    placeholder: {
      type: String,
      default: ''
    },
    // 是否允许清空
    allowClear: {
      type: Boolean,
      default: false
    }
  },
  data () {
    this.fetchUser = debounce(this.fetchUser, 800)
    return {
      page: 1 // 当前页码
    }
  },
  created () {
    this.spinning = true
  },
  watch: {
    'options' (val) {
      if (val.length) {
        this.spinning = false
      }
    }
  },
  methods: {

    // select 值发生改变
    changeValue (value, option) {
      this.$emit('change', value)
    },
    // 分页查询
    changeSearch (page, pageSize) {
      this.spinning = true
      this.$emit('pagination', {
        page: page,
        pageSize: pageSize
      })
    },
    // 搜索
    fetchUser (value) {
      this.spinning = true
      this.$emit('search', value)
    }
  },
  render () {
    const props = {}
    Object.keys(Select.props).forEach(k => {
      // 数据处理
      this[k] && k !== 'options' && (props[k] = this[k])
      return props[k]
    })
    const { changeValue, changeSearch, value, options, labelValue, labelText, pageTotal, pageSize, spinning, fetchUser } = this
    if (this.pageTotal) {
      this.$scopedSlots.dropdownRender = (menu) => {
        return ([
          <v-nodes vnodes={menu} />,
          <div>
            <Divider class="page-divider" slot-scope="menu" />
            <div onMousedown={e => e.preventDefault()} class="paging-box">
              <Pagination simple total={pageTotal} defaultPageSize={pageSize} onchange={changeSearch} itemRender={(current, type, originalElement) => {
                if (type === 'prev') {
                  return <a>上一页</a>
                } else if (type === 'next') {
                  return <a>下一页</a>
                }
                return originalElement
              }} />
            </div>
          </div>
        ])
      }
    }
    this.$scopedSlots.notFoundContent = () => {
      return <div>
        {spinning ? <Spin tip="加载中"></Spin> : null}
      </div>
    }
    return (
      <div class="standard-select" >
        <Select
          {...{ props, scopedSlots: { ...this.$scopedSlots } }}
          onchange={changeValue}
          onsearch={fetchUser}
          filterOption={false}
          value={value}>
          {options.map((item, index) => {
            return <Option value={item[labelValue]} key={index}>{item[labelText]}</Option>
          })}
        </Select>
      </div >)
  }
}
